<template>
	<div id = "history">
		<!-- 折线图 -->
		<chart :options="polar"></chart>
		<!-- 列表数据 -->
		<div class = "history">
			<div class="history-topbar">
				<span class="history-topbar-time">
					{{today}}
				</span>
				<mu-raised-button class="history-topbar-button" label = "记一笔" @click="openCalculator('bottom')"></mu-raised-button>
			</div>
			<mu-list>
			    <mu-list-item v-for="(item,index) in accountList" :title="item.remark" :describeText="item.time" class ="list" @click="openBottomSheet(index)" >
					<!-- <div class = "list-tool" >
						<div>
							<img src="src/assets/image/update.png" alt="">
						</div>
						<div>
							<img src="src/assets/image/delete2.png" alt="">
						</div>
					</div> -->
				    <mu-avatar :src="item.icon" slot="leftAvatar"/>
				      <!-- <mu-icon value="chat_bubble" slot="right"/> -->
				    <span class="cost" slot="after">{{item.amount}}</span>
			    </mu-list-item>
			</mu-list>
		</div>

		<!-- 记账模块 -->
		<mu-popup position="bottom" popupClass="demo-popup-bottom" :open="bottomPopup" @close="closeCalculator('bottom')" >

		    <!-- <mu-appbar title="弹出">
		      <mu-flat-button slot="right" label="关闭" color="white" />
		    </mu-appbar> -->
		    <div class = "display">
		    	<img :src = "selectedType.icon" class = "display-money-icon">
		    	<div class = "display-account">
		    		{{sum}}
		    	</div>
		    </div>
		    <div class = "label-selector">
		    	<div class="type" v-for = "(item,index) in accountType" @click = "selectType(index)">
		    		<img :src="item.icon" class = "type-icon">
		    		<div class = "type-info">
		    			{{item.name}}
		    		</div>
		    	</div>
		    </div>
		    <div class = "abacus">
		    	<div class="abacus-left">
		    		<div class="abacus-left-row">
		    			<div class="abacus-left-keyboard" @click = "count">
		    				1
		    			</div>
		    			<div class="abacus-left-keyboard" @click = "count">
		    				2
		    			</div>
		    			<div class="abacus-left-keyboard" @click = "count">
		    				3
		    			</div>
		    		</div>
		    		<div class="abacus-left-row">
		    			<div class="abacus-left-keyboard" @click = "count">
		    				4
		    			</div>
		    			<div class="abacus-left-keyboard" @click = "count">
		    				5
		    			</div>
		    			<div class="abacus-left-keyboard" @click = "count">
		    				6
		    			</div>
		    		</div>
		    		<div class="abacus-left-row">
		    			<div class="abacus-left-keyboard" @click = "count">
		    				7
		    			</div>
		    			<div class="abacus-left-keyboard" @click = "count">
		    				8
		    			</div>
		    			<div class="abacus-left-keyboard" @click = "count">
		    				9
		    			</div>
		    		</div>
		    		<div class="abacus-left-row">
		    			<div class="abacus-left-keyboard" @click = "count">
		    				0
		    			</div>
		    			<div class="abacus-left-keyboard" @click = "count">
		    				.
		    			</div>
		    			<div class="abacus-left-keyboard" @click = "operator('getResult')" >
		    				=
		    			</div>
		    		</div>
		    	</div>
		    	<div class="abacus-right">
		    		<div class="abacus-left-keyboard" @click = "operator('plus')">
		    			<!-- <img src="src/assets/image/delete.png" alt="删除"> -->
		    			+
		    		</div>
		    		<div class="abacus-left-keyboard" @click = "operator('minus')">
		    			-
		    		</div>
		    		<div class="complite" @click ="openDialog">
		    			OK
		    		</div>
		    	</div>
		    </div>
		    <!-- @click="closeCalculator('bottom')" :overlay = false-->
		     <mu-dialog :open="dialog" title="你的备注：" @close="closeDialog" >
			    <mu-text-field hintText="例如：买菜，水果" v-model = "remark" inputClass = "input"/><br/>
			    <mu-flat-button slot="actions" @click="closeDialog" primary label="取消"/>
			    <mu-flat-button slot="actions" primary 
			    	@click="closeDialogAndSave()" 
			    	label="确定"/>
			</mu-dialog>
		</mu-popup>

		<!-- 底部弹出框模块 -->
		<mu-bottom-sheet :open="bottomSheet" @close="cleanState" sheetClass = "sheetClass">
		    <mu-list @itemClick="closeBottomSheet">
				<mu-list-item title="编 辑" @click = "openCalculator('bottom')"/>
				<mu-list-item title="删 除" @click = "deleteAccount"/>
			</mu-list>
	    </mu-bottom-sheet>
	</div>
</template>
<script>
	import echarts from 'echarts'
	export default {
		name: 'history',
		data () {
			return {
				today: "",
				accountList: [],
				accountIndex: null,
				lastList:  [],
				bottomPopup: false,
				list: [],
				sum: 0,
				countList: [],
				polar: {
			        title: { 
			    		show: false,
				    },
				    legend:{
				    	show: true,
				    },
				    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                show:"true",
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
				    grid: {
				    	left: 15,
				    	top: 0,
				    	right: 15,
				    	bottom: 30
				    },
				    color: ["#5DCDBF"],
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        axisTick: {
				        	show: false
				        },
				        axisLine: {
				        	lineStyle: {
				        		color: '#5DCDBF'
				        	}
				        },
				        data: []
				    },
				    yAxis: { 
				    	show: false
				    },
					series: [{
		            	name:'今日总支出',
		            	type:'line',
		            	stack: '总量',
		            	data:[]
		       		}]
		       	},
		        selectedType: {
		        	icon: 'src/assets/image/money2.png',
		        	iconType: null,
		        	type: null
		        },
		       	accountType: [
		       		{
		       			name: "吃饭",
		       			iconType: 1,
		       			type: 1,
		       			icon: "src/assets/image/rice.png",
		       		},
		       		{
		       			name: "淘宝",
		       			iconType: 2,
		       			type: 1,
		       			icon: "src/assets/image/taobao.png",
		       		},
		       		{
		       			name: "娱乐",
		       			iconType: 3,
		       			type: 1,
		       			icon: "src/assets/image/music.png",
		       		},
		       		{
		       			name: "出行",
		       			iconType: 4,
		       			type: 1,
		       			icon: "src/assets/image/bus.png",
		       		},
		       		{
		       			name: "设备",
		       			iconType: 5,
		       			type: 1,
		       			icon: "src/assets/image/camera.png",
		       		},
		       		{
		       			name: "购物",
		       			iconType: 6,
		       			type: 1,
		       			icon: "src/assets/image/cart.png",
		       		},
		       		{
		       			name: "收入",
		       			iconType: 7,
		       			type: 2,
		       			icon: "src/assets/image/money.png",
		       		},
		       		{
		       			name: "家装",
		       			iconType: 8,
		       			type: 1,
		       			icon: "src/assets/image/rice.png",
		       		},
		       		{
		       			name: "零食",
		       			iconType: 9,
		       			type: 1,
		       			icon: "src/assets/image/ice-cream.png",
		       		},
		       		{
		       			name: "话费",
		       			iconType: 10,
		       			type: 1,
		       			icon: "src/assets/image/phone.png",
		       		},
		       		{
		       			name: "购物",
		       			iconType: 11,
		       			type: 1,
		       			icon: "src/assets/image/shopping.png",
		       		},
		       		{
		       			name: "零食",
		       			iconType: 12,
		       			type: 1,
		       			icon: "src/assets/image/normal.png",
		       		},
		       	],
		       	dialog: false,
		       	bottomSheet: false,
		       	remark: ""
			}
		},
		methods: {
		    openCalculator (position) {
		    	//判断是否编辑进入
		    	if(this.accountIndex !== null){
		    		this.sum = parseFloat(this.accountList[this.accountIndex].amount)
			    	this.selectedType.icon = this.accountList[this.accountIndex].icon
			    	this.selectedType.type = this.accountList[this.accountIndex].type
			    	this.selectedType.iconType = this.accountList[this.accountIndex].iconType
			    	this.remark = this.accountList[this.accountIndex].remark
		    	}
		        this[position + 'Popup'] = true
		    },
		    closeCalculator (position) {
		        this[position + 'Popup'] = false
		        this.sum = 0
		        this.countList = []
		    },
		    openDialog () {
		    	if(this.selectedType.iconType !== null){
		    		this.dialog = true
		    	}
		      	else
		      		alert("请选择一种收支类型")
		    },
		    closeDialog () {
		      	this.dialog = false
		    },
		    closeDialogAndSave (){
		    	var that = this
		    	var amount = null;
		    	//取反操作
		    	if(this.selectedType.type == "1"){
		    		amount = -this.sum
		    	}
		    	if(this.accountIndex === null){
			    	this.$http.get('http://127.0.0.1/Vue/account/service/history.php', {
						params: {
							type: "add",
			                accountType: this.selectedType.type,
			                time: this.getToday,
			                amount: amount,
			                remark: this.remark,
			                uid: this.$store.state.uid,
			                iconType: this.selectedType.iconType
			            }
					    }).then(function(res){
					    	console.log(res)
					});
		    	}
		    	else{
		    		//填充当前状态
		    		this.$http.get('http://127.0.0.1/Vue/account/service/history.php', {
						params: {
							type: "update",
							aid: this.accountList[this.accountIndex].aid,
			                accountType: this.selectedType.type,
			                amount: this.sum,
			                remark: this.remark,
			                uid: this.$store.state.uid,
			                iconType: this.selectedType.iconType
			            }
					    }).then(function(res){
					    	console.log(res)
					});
		    	}
		    	this.accountIndex = null
		    	this.getAllAmount()
		    	this.closeCalculator('bottom')
      			this.dialog = false
      			//由于museUI共用遮罩层，所以必须手动隐藏
      			document.querySelector(".mu-overlay").style.display = "none"
		    },
		    closeBottomSheet () {
		        this.bottomSheet = false
		        document.querySelector(".mu-overlay").style.display = "none"
		    },
		    openBottomSheet (index) {
		        this.bottomSheet = true
		        this.accountIndex = index
		        if(document.querySelector(".mu-overlay"))
		       		document.querySelector(".mu-overlay").style.display = "block"
		    },
		    //获得icon图标
		    getIconImage: function(iconType){
		    	switch(iconType){
		    		case("1") : return "src/assets/image/rice.png";
		    		case("2") : return "src/assets/image/taobao.png";
		    		case("3") : return "src/assets/image/music.png";
		    		case("4") : return "src/assets/image/bus.png";
		    		case("5") : return "src/assets/image/camera.png";
		    		case("6") : return "src/assets/image/cart.png";
		    		case("7") : return "src/assets/image/money.png";
		    		case("8") : return "src/assets/image/home.png";
		    		case("9") : return "src/assets/image/ice-cream.png";
		    		case("10") : return "src/assets/image/phone.png";
		    		case("11") : return "src/assets/image/shopping.png";
		    		case("12") : return "src/assets/image/normal.png";
		    	}
		    },
		    //选择支出类型
		    selectType(index){
		    	this.selectedType.icon = this.accountType[index].icon
		    	this.selectedType.iconType = this.accountType[index].iconType
		    	this.selectedType.type = this.accountType[index].type
		    },
		    //获取所有账目
		    getAllAmount: function(){
		    	var that = this
				this.$http.get('http://127.0.0.1/Vue/account/service/history.php', {
					params: {
		              type: "selectAllAccount",
		              uid: this.$store.state.uid
		            }
			    }).then(function(res){
			    	that.accountList = []
			        console.log(res)
			        res.data.forEach(function(item){
			        	var icon = that.getIconImage(item.iconType)
			        	that.accountList.push({
			        		aid: item.aid,
							time: item.time,
							remark: item.remark,
							amount: item.amount,
							icon: icon,
							type: item.type,
							iconType: item.iconType
			        	})
			        })
			    });
		    },
		    //获取最近7天账目消息
		    getLastAmount: function(){
		    	var that = this
				this.$http.get('http://127.0.0.1/Vue/account/service/history.php', {
					params: {
		              type: "selectLastAccount",
		              uid: this.$store.state.uid
		            }
			    }).then(function(res){
			        res.data.forEach(function(item){
			        	that.polar.series[0].data.push(item.amount)
			        	that.polar.xAxis.data.push(item.time.substring(5,item.time.length))
			        })
			    });
		    },
		    //获取今天的时间
		    getToday: function(){
		    	var date = new Date()
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day = date.getDate()

				var hour = date.getHours()
				var minute = date.getMinutes()
				var second = date.getSeconds()

				return [year, month, day].join('-')
		    },
		    //计算器
		    count: function(event){
		    	var num = parseFloat(event.target.innerText)
		    	console.log(this.countList)
		    	if(this.sum === 0)
		    		this.sum = event.target.innerText
		    	else if(this.sum !== 0){
		    		this.sum = parseFloat(this.sum + "" + num)
		    	}
		    },
		    //符号运算
		    operator: function(type){
		    	if(type === "plus"){
		    		this.countList.push(parseFloat(this.sum))
		    		this.countList.push('plus')
		    		this.sum = 0
		    	}
		    	else if(type === "minus"){
		    		this.countList.push(parseFloat(this.sum))
		    		this.countList.push('minus')
		    		this.sum = 0
		    	}
		    	else if(type === "getResult"){
		    		this.sum = this.getResult()
		    	}
		    },
		    //得到计算结果
		    getResult: function(){
		    	var temp = null
		    	var operator = null
		    	var that = this
		    	this.countList.push(parseFloat(this.sum))
		    	this.countList.forEach(function(item){
		    		console.log(that.countList)
		    		if(typeof(item) === "number" && temp === null){
		    			temp = item
		    		}
		    		else if(typeof(item) === "number" && temp !== null){
		    			if(operator === "plus"){
		    				temp += item 
		    			}
		    			else if(operator === "minus"){
		    				temp -= item
		    			}
		    		}
		    		else if(typeof(item) !== "number"){
		    			operator = item
		    		}
		    		else{
		    			operator === null
		    		}
		    	})
		    	this.countList = []
		    	return temp;
		    },
		    //删除账目
		    deleteAccount: function(){
		    	this.$http.get('http://127.0.0.1/Vue/account/service/history.php', {
					params: {
		              type: "delete",
		              aid: this.accountList[this.accountIndex].aid,
		              uid: this.$store.state.uid
		            }
			    }).then(function(res){
			 		this.getAllAmount()
			    });
		    },
		    //更新账目
		    updateAccount: function(){
		    	this.sum = this.accountList[this.accountIndex].amount
		    	this.selectedType.icon = this.accountList[this.accountIndex].icon
		    	this.selectedType.type = this.accountList[this.accountIndex].type
		    	this.selectedType.iconType = this.accountList[this.accountIndex].iconType
		    	this.remark = this.accountList[this.accountIndex].remark
		    },
		    cleanState: function(){
		    	this.accountIndex = null
		    	this.bottomSheet = false
		        document.querySelector(".mu-overlay").style.display = "none"
		    }
		},
		watch: {
		    topPopup (val) {
		        if (val) {
		            setTimeout(() => {
		            this.topPopup = false
		            }, 2000)
		        }
		    }
		},
		mounted() {
			this.getAllAmount()
			this.getLastAmount()
			this.today = this.getToday()
		}
	}
</script>
<style scoped>
    #history{
    	padding-top: 86px;
    }
	#line-chart{
		height: 20vh;
		width: 100%;
		background-color: pink;
	}
	.list{
		position: relative;
	}
	.list:nth-of-type(odd){
		background-color: #e6e6e6;
	}
	.list:nth-of-type(even){
		background-color: #f4f4f4;
	}
	.history-topbar{
		position: relative;
		left: 0;
		top: 0;
		height: 8vh;
	}
	.history-topbar-time{
		font-size: 0.30rem;
		color: #999;
		position: absolute;
		left: 30px;
		line-height: 8vh;
	}
	.history-topbar-button{
		position: absolute;
		right: 10px;
		background-color: #fe8745;
		color: white;
		bottom: 15%;
	}
	.button{
		background-color: #fe8745;
		color: white;
		line-height: 8vh;
	}
	.cost{
		font-size: 0.40rem;
	}
	.display{
		display: flex;
		height: 28vh;
		width: 100vw;
		background-color: #5dcdbf;
		align-items: center;
		justify-content: space-between;
		padding: 0 2vh;
	}
	.display-money-icon{
		width: 5vh;
		height: auto;
	}
	.display-account{
		font-size: 1rem;
		color: white;
	}
	.label-selector{
		height: 17vh;
		width: 100vw;
		padding: 3vw 3vw;
		white-space: nowrap;
		overflow: hidden;
	}
	.type{
		display: inline-block;
		height: 100%;
		margin-right: 3vw;
		text-align: center;
	}
	.type-icon{
		height: 60%;
		width: auto;
	}
	.abacus{
		display: flex;
		flex-direction: row;
		height: 55vh;
		background-color: #404040;
	}
	.abacus-left{
		flex: 5;
		display: flex;
		flex-direction: column;
	}
	.abacus-left-row{
		flex: 1;
		display: flex;
		flex-direction: row;
	}
	.abacus-left-keyboard{
		flex: 1;
		display: flex;
		color: white;
		justify-content: center;
		align-items: center;
		font-size: .7rem;
	}
	.abacus-left-keyboard > img{
		width: 40%;
		height: auto;
	}
	.abacus-right{
		flex: 2;
		display: flex;
		flex-direction: column;
	}
	.complite{
		flex: 2;
		display: flex;
		color: white;
		justify-content:  center;
		align-items: center ;
		font-size: .7rem;
		background-color: #5dcdbf;
	}
	.list-tool{
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		left: 0;
		top: 0;
		width: 100%;
		height: 100px;
		background-color: rgba(0,0,0,.5);
	}
	.list-tool  > div{
		display: flex;
		height: 100%;
		padding: 15px;
	}
	.list-tool img{
		height: 40%;
		width: auto;
	}
	.echarts {
	  	height: 20vh;
	  	width: 100vw;
	}

</style>
<style>
	.sheetClass{
		text-align: center;
	}
	.mu-text-field{
		width: 100%;
	}
	.demo-popup-bottom {
	  width: 100%;
	  top: 0;
	}
</style>